<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter

const tel: Ref<string> = ref('')
const name: Ref<string> = ref('')
const show: Ref<boolean> = ref(false)
const value: Ref<number> = ref(1)
const checked = ref(true)

// function btnClick() {
//   if(tel.value != '' && name.value != '') {
    
//   }
// }

</script>

<template>
  <div class="confirm">
    <van-nav-bar style="background-color: white;" title="确认订单">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /></p>
      </template>
    </van-nav-bar>

    <div class="skeleton">
      <!-- 展示房源内容 -->
      <van-skeleton :animate="false">
        <template #template>
          <div :style="{ display: 'flex', width: '90%' }">
            <img src="@/assets/login.jpg" />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <h6>拱北华山别墅</h6>
              <p>珠海 3居3床6人 123平米</p>
              <span style=" font-size:14px;">￥6000</span>
            </div>
          </div>
        </template>
      </van-skeleton>
    </div>

    <!-- 入离日期 -->
    <div class="time">
      <van-nav-bar title="">
        <template #left>
          <span style="font-weight: 800;">入离日期</span>
        </template>
        <template #right>
          <span style="color: gray;" @click="show = true">修改日期</span>
          <van-icon name="arrow" size="18" color="gray" />
        </template>
      </van-nav-bar>

      <!-- 弹出层 -->
      <!-- <van-cell>展示弹出层</van-cell> -->
      <van-popup :show="show" @click="show = false" style="width: 300px;height: 600px;">
        <van-calendar v-model:show="show" />
      </van-popup>

      <div class="msg">
        <div>
          <span>10月12日</span><br>
          <i>周六15:00后入住</i>
        </div>
        <b>共一晚</b>
        <div>
          <span>10月13日</span><br>
          <i>周日12:00前入住离开</i>
        </div>
      </div>
      <p>入住人数({{ value }}/6)<van-stepper v-model="value" max="6" /></p>
      <div class="inp">
        <p>联系电话<input type="text" v-model="tel"></p>
        <p>联系人姓名<input type="text" v-model="name"></p>
      </div>
    </div>

    <div class="invoice">
      <p>
        <van-field>
          <template #input>
            <p>免费赠送住宿意外险</p>
            <van-switch v-model="checked" @click="checked = checked" size="12px" />
          </template>
        </van-field>
      </p>
      <p>
      <h1>发票</h1>
      <span>发票请联系房东（有疑问咨询客服）</span>
      </p>
    </div>

    <div class="last">
      <p>退订规则</p>
      <p>取消订单。扣除全部房费作为违约金支付给房东，如提前离店，扣全部剩余房费作为违约金支付给房东</p>
      <p>入住提示房东确认后方可线上向房东索要入住须知，方便您安排入住;系统24小时客服服务，确保您入住无忧</p>
      <p>押金提示在线支付担金200元，到店后无需支付，住房扭金离店后，如无需将原方式退还</p>
      <h2>￥642.00</h2>
      <p>含押金￥200（可退）</p>
      <van-button class="confirmPay" type="primary" size="large" @click="$router.push('/detail/pay')">提交订单</van-button>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.confirm {
  padding: 0 10px;
}

img {
  width: 80px;
  height: 80px;
  margin-top: 15px;
  margin-left: 15px;
}

.van-skeleton {
  border: 1px solid gray;
  border-radius: 10px;
  box-shadow: 3px 3px 10px 1px gray;
  padding-bottom: 10px;
  margin-top: 10px;
}

.time {
  border: 1px solid gray;
  margin-top: 10px;
  padding: 0 5px;
  box-shadow: 3px 3px 10px 1px gray;
}

.msg {
  height: 80px;
  border-radius: 10px;
  background-color: greenyellow;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  span {
    line-height: 26px;
    font-size: 14px;
  }

  b {
    width: 50px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: gray;
  }

  i {
    font-style: normal;
    color: gray;
    line-height: 20px;
  }
}

.van-stepper {
  float: right;
}

.inp {
  display: flex;
  flex-direction: column;

  input {
    float: right;
  }
}

.invoice {
  border: 1px solid gray;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px 1px gray;

  p {
    color: gray;
  }

  p+p {
    border-top: 1px solid gray;
    padding-left: 10px;
  }

  h1 {
    color: black;

  }

  .van-switch {
    margin-left: 160px;
    color: blue;
  }
}

.last {
  color: gray;
  font-size: 14px;
  margin-top: 50px;

  h2 {
    color: orange;
    font-size: 28px;
    font-weight: normal;
  }
  /* .confirmPay{
    margin-top: 280px;
    margin-left: 100px;
  } */

}
</style>